<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="/css/layui.css">
  <link rel="stylesheet" href="/css/header.css">
  <script src="/layui.js"></script>
  <style>
    hr{
      margin: 50px 0;
    }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">区域论坛系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>
          
          <li class="layui-nav-item layui-hide-xs layui-this"><a href="">文章管理</a></li>
          <li class="layui-nav-item layui-hide-xs"><a href="/admin/user">用户管理</a></li>
          
        </ul>
        <ul class="layui-nav layui-layout-right list">
          <li style="line-height: 60px;">欢迎您：<span id="username"></span><a href="/admin/logout" style="color: rgb(0,150,136);">退出</a></li>
          <script>
            document.getElementById('username').innerHTML = sessionStorage.admin
          </script>
       
          
        </ul>
      </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item ">
            <a href="/admin">
                发布文章
            </a>
        </li>
        <li class="layui-nav-item ">
            <a href="/admin/articleList">
                查看文章列表
            </a>
        </li>
        <li class="layui-nav-item layui-this">
            <a href="/admin/type">
                设置文章分类
            </a>
        </li>

        
        
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <h1 style="padding-left: 50px;">设置文章分类</h1>
            </div>
            <% data.forEach(function(item,index){ %>
                <div class="layui-form-item">
                    <label class="layui-form-label">文章分类<%= index+1 %></label>
                    <div class="layui-input-block">
                        <input value="<%= item.name %>"  type="text"   placeholder="请输入分类标题" autocomplete="off" class="layui-input">
                        <br>
                        <button class="layui-btn edit" data-id="<%= item.id %>" type="button">修改</button>
                        <button class="layui-btn layui-btn-danger del" data-id="<%= item.id %>" type="button">删除</button>
                    </div>
                  </div>
            <% }); %>
            <hr>
            <div class="layui-form-item">
              <label class="layui-form-label">文章分类<%= data.length+1 %></label>
              <div class="layui-input-block">
                  <input type="text"  placeholder="请输入分类标题" autocomplete="off" class="layui-input">
                  <br>
                  <button class="layui-btn add"  type="button" >新增</button>
                </div>
            </div>
          </form>
          <script>
             layui.use(function(){
              let $ = layui.jquery;
              // 删除
              $('.del').click(function(){
                $.post({
                  url:'/article/delType/'+$(this).attr('data-id'),
                  success:function(res){
                    if(res.code == 0){
                      layer.msg("删除成功")
                      
                      setTimeout(() => {
                        window.location.reload()
                      }, 1000);
                    }else if(res.code === 401){
                      layer.msg("删除失败，该分类下有所属文章，请删除文章后再试")
                    }else{
                      layer.msg("删除失败，请检查网络")
                    }
                  }
                })
              })
              // 修改
              $('.edit').click(function(){
                let str = $(this).prevAll('input').val().trim();
                if(str.length == 0){
                  layer.msg("不能为空")
                  return;
                }
                $.post({
                  url:'/article/editType/'+$(this).attr('data-id'),
                  data:{
                    name:str
                  },
                  success:function(res){
                    if(res.code == 0){
                      layer.msg("修改成功")
                      setTimeout(() => {
                        window.location.reload()
                      }, 1000);
                    }else{
                      layer.msg("修改失败，请检查网络")
                    }
                  }
                })
              })
              // 新增
              $('.add').click(function(){
                let str = $(this).prevAll('input').val().trim();
                for(let i = 0;i<$('input').length-1;i++){
                  
                  if($('input')[i].value === str){
                    
                    layer.msg("名称不可以重复")
                    return;
                  }
                }
                if(str.length == 0){
                  layer.msg("不能为空")
                  return;
                }
                
                $.post({
                  url:'/article/addType',
                  data:{
                    name:str
                  },
                  success:function(res){
                    if(res.code == 0){
                      layer.msg("添加成功")
                      setTimeout(() => {
                        window.location.reload()
                      }, 1000);
                    }else{
                      layer.msg("添加失败，请检查网络")
                    }
                  }
                })
              })
             })
          </script>
       
      
    </div>
  </div>
  

</div>
</body>
</html>